<template>
  <div class="home-box">
    <div class="right-project-nav">
      <div
        class="right-project-nav-item"
        :class="{ 'right-project-nav-item-actived': navActived == 'recent' }"
        @click="navClick('recent')"
      >
        最近浏览
      </div>
      <div
        class="right-project-nav-item"
        :class="{ 'right-project-nav-item-actived': navActived == 'star' }"
        @click="navClick('star')"
      >
        星标
      </div>
    </div>
    <list :data="data" v-bind="$attrs" v-on="$listeners"></list>
  </div>
</template>

<script>
import list from "./list";
import { mapState } from "vuex";
export default {
  inheritAttrs: false, // 取消props自应用html属性的功能
  components: {
    list,
  },
  data() {
    return {
      navActived: "recent",
      data: {
        projects: [],
        folders: [],
      },
      page: 1,
      size: 100,
    };
  },
  watch: {
    navActived: {
      handler: function(newVal, oldVal) {
        this.page = 1;
        this.data = {
          projects: [],
          folders: [],
        };
        if (newVal == "recent") {
          this.getRecentData();
        } else {
          this.getStarData();
        }
      },
      immediate: true,
    },
    listReachBottom(newVal, oldVal) {
      if (!newVal) return;
      if (this.listLoad == "home_recent") {
        this.getRecentData();
      } else if (this.listLoad == "home_star") {
        this.getStarData();
      }
    },
  },
  computed: mapState(["listReachBottom", "listLoad"]),
  methods: {
    navClick(val) {
      this.navActived = val;
    },
    getRecentData() {
      this.$store.commit("setListLoad", "home_recent");
      this.$axios
        .get("/browseRecord/list", {
          params: { page: this.page, size: this.size },
        })
        .then((res) => {
          if (res.success) {
            if (res.data.list && res.data.list.content) {
              this.data["projects"] = [
                ...this.data.projects,
                ...res.data.list.content,
              ];
              this.page += 1;
            }
          }
        });
    },
    getStarData() {
      this.$store.commit("setListLoad", "home_star");
      this.$axios
        .get("/project/findStar", {
          params: { page: this.page, size: this.size },
        })
        .then((res) => {
          if (res.success) {
            if (res.pageProject && res.pageProject.content) {
              this.data["projects"] = [
                ...this.data.projects,
                ...res.pageProject.content,
              ];
              this.page += 1;
            }
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.home-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.right-project-nav {
  display: flex;
  margin-bottom: 29px;
}

.right-project-nav-item {
  cursor: pointer;
  position: relative;
  color: #666;
  font-size: 18px;
  margin-right: 54px;
  padding-bottom: 9px;
}

.right-project-nav-item:last-child {
  margin-right: 0;
}

.right-project-nav-item-actived {
  font-weight: bold;
  color: #333;
}

.right-project-nav-item-actived::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 3px;
  background: #666666;
  border-radius: 2px;
}
</style>
